<template>
  <div class="app-container">
    <el-form ref="queryFormRef"  v-sign="['<%= signPre %>:list']" :model="page.queryForm" @submit.native.prevent inline>
      <%_ for( let i=0; i < query.length; i++ ) { -%>
        <el-form-item label="<%= query[i].column_comment %>" prop="<%= query[i].column_name %>">
        <%_ if(query[i].html_type === 'input') { -%>
          <el-input v-model="page.queryForm.<%= query[i].column_name %>" @keyup.enter="getTableList" clearable
            placeholder="请输入<%= query[i].column_comment %>" />
        <%_ } else if(query[i].html_type === 'textarea') { -%>
          <el-input type="textarea" v-model="page.queryForm.<%= query[i].column_name %>" @keyup.enter="getTableList" clearable
            placeholder="请输入<%= query[i].column_comment %>" />
        <%_ } else if(query[i].html_type === 'select') { -%>
          <el-select v-model="page.queryForm.<%= query[i].column_name %>" placeholder="请选择<%= query[i].column_comment %>">
            <el-option
              v-for="item in <%= query[i].dict_type %>"
              :key="item.dict_value"
              :label="item.dict_label"
              :value="item.dict_value"
            ></el-option>
          </el-select>
        <%_ } else if(query[i].html_type === 'radio') { -%>
          <el-radio-group v-model="page.queryForm.<%= query[i].column_name %>">
            <%_ if(query[i].dict_type != null) { -%>
            <el-radio
              v-for="item in <%= query[i].dict_type %>"
              :value="item.dict_value"
            >
             {{<%_ item.dict_label -%>}}
            </el-radio>
            <%_ } else { -%>
            <el-radio value="1">Option 1</el-radio>
            <el-radio value="2">Option 2</el-radio>
            <%_ } -%>
          </el-radio-group>
        <%_ } else if(query[i].html_type === 'checkbox') { -%>
          <el-checkbox-group v-model="page.queryForm.<%= query[i].column_name %>">
            <%_ if(query[i].dict_type != null) { -%>
            <el-checkbox v-for="item in <%= query[i].dict_type %>" :label="item.dict_label" :value="item.dict_value" />
            <%_ } else { -%>
              <el-checkbox label="Option A" value="Value A" />
              <el-checkbox label="Option B" value="Value B" />
              <el-checkbox label="Option C" value="Value C" />
            <%_ } -%>
          </el-checkbox-group>
        <%_ } else if(query[i].html_type === 'datetime') { -%>
          <%_ if(query[i].query_type == 'EQ') { -%>
            <el-date-picker
              v-model="page.queryForm.<%= query[i].column_name %>"
              type="date"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              placeholder="请选择日期"
            />
          <%_ } else if(query[i].query_type == 'BETWEEN') { -%>
            <el-date-picker
              v-model="<%= query[i].column_name %>Range"
              type="daterange"
              value-format="YYYY-MM-DD"
              format="YYYY-MM-DD"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              @change="<%= query[i].column_name %>RangeChange"
            />
          <%_ } -%> 
        <%_ } else if(query[i].html_type === 'imageUpload') { -%>
          <el-input type="textarea" v-model="page.queryForm.<%= query[i].column_name %>" @keyup.enter="getTableList" clearable
            placeholder="请输入<%= query[i].column_comment %>" />
        <%_ } else if(query[i].html_type === 'fileUpload') { -%>
          <el-input type="textarea" v-model="page.queryForm.<%= query[i].column_name %>" @keyup.enter="getTableList" clearable
            placeholder="请输入<%= query[i].column_comment %>" />
        <%_ } else if(query[i].html_type === 'editor') { -%>
          <el-input type="textarea" v-model="page.queryForm.<%= query[i].column_name %>" @keyup.enter="getTableList" clearable
            placeholder="请输入<%= query[i].column_comment %>" />
        <%_ } -%>
        </el-form-item>
      <%_ } -%>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getTableList">搜索</el-button>
          <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        </el-form-item>
    </el-form>

    <vxe-toolbar ref="toolbarRef" custom print :refresh="{ query: getTableList }">
      <template #buttons>
        <el-button v-sign="['<%= signPre %>:add']" type="primary" icon="Plus" plain @click="handleAdd()">新增</el-button>
        <el-button v-sign="['<%= signPre %>:edit','<%= signPre %>:get']" type="success" icon="Edit" plain
          @click="handleUpdate()">修改</el-button>
        <el-popconfirm title="您确定要删除选中的数据吗?" confirm-button-text="确认" cancel-button-text="取消" @confirm="handleDelete()">
          <template #reference>
            <el-button v-sign="['<%= signPre %>:delete']" type="danger" icon="Delete" plain>删除</el-button>
          </template>
        </el-popconfirm>
        <el-button v-sign="['<%= signPre %>:export']" type="warning" icon="Download" plain
          @click="handleExport()">导出</el-button>
      </template>
    </vxe-toolbar>

    <vxe-table ref="<%= tableInfo.business_name %>TableRef" border="inner" align="center"
      :column-config="{ resizable: true }" :row-config="{ isHover: true }" :loading="loading"
      :data="tableData" @checkbox-all="selectAllChangeEvent" @checkbox-change="selectChangeEvent">
      <vxe-column type="checkbox" width="60"></vxe-column>
      <%_ for (let i = 0; i < list.length; i++ ) { -%>
      <vxe-column field="<%= list[i].column_name %>" title="<%= list[i].column_comment %>"></vxe-column>
      <%_ } -%>
      <vxe-column title="操作">
        <template #default="{ row }">
          <el-button v-sign="['<%= signPre %>:edit','<%= signPre %>:get']" link type="primary" icon="Edit" @click="handleUpdate(row)">修改</el-button>
          <el-popconfirm title="您确定要删除此数据吗?" confirm-button-text="确认" cancel-button-text="取消"
            @confirm="handleDelete(row)">
            <template #reference>
              <el-button v-sign="['<%= signPre %>:delete']" link type="primary" icon="Delete">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </vxe-column>
    </vxe-table>

    <el-row justify="end" style="padding: 16px">
      <el-pagination v-show="page.total > 0" v-model:current-page="page.queryForm.pageNum"
        v-model:page-size="page.queryForm.pageSize" :page-sizes="[10, 20, 30, 40]"
        layout="total, sizes, prev, pager, next, jumper" :total="page.total" @size-change="getTableList"
        @current-change="getTableList" />
    </el-row>

    <!-- 新增、修改表单 -->
    <el-dialog
      v-model="open"
      :title="title"
      width="500px"
      append-to-body
      destroy-on-close
      @closed="reset"
    >
      <el-form
        ref="formRef"
        :model="page.form"
        :rules="page.rules"
        label-width="100px"
      >
      <%_ for(let i = 0; i < edit.length; i++) { -%>
        <el-form-item label="<%= edit[i].column_comment %>" prop="<%= edit[i].column_name %>">
          <el-input
            v-model="page.form.<%= edit[i].column_name %>"
            clearable
            placeholder="请输入<%= edit[i].column_comment %>"
          />
        </el-form-item>
      <%_ } -%>  
      </el-form>
      <template #footer>
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted,nextTick } from 'vue'
import {
  <%= tableInfo.business_name %>List,
  <%= tableInfo.business_name %>Add,
  <%= tableInfo.business_name %>Edit,
  <%= tableInfo.business_name %>Del,
  <%= tableInfo.business_name %>Info,
  <%= tableInfo.business_name %>Export
} from "@/api/<%= tableInfo.module_name %>/<%= tableInfo.business_name %>.js";
import { downloadFile } from "@/utils/download.js";

const queryFormRef = ref();
const <%= tableInfo.business_name %>TableRef = ref();
const toolbarRef = ref();
const formRef = ref();

const page = reactive({
  queryForm: {
    <%_ for(let i = 0; i < query.length; i++) { -%>
    <%_ if(query[i].query_type != 'BETWEEN') { -%>
    <%= query[i].column_name %>: null,
    <%_ } else { -%>
    begin_<%= query[i].column_name %>: null,
    end_<%= query[i].column_name %>: null,
    <%_ } -%>
    <%_ } -%>
    pageNum: 1,
    pageSize: 10,
  },
  total: 0,
  // 新增、修改表单
  form: {},
  // 新增、修改表单验证规则
  rules: {
    <%_ for(let i = 0; i < required.length; i++) { -%>
    <%= required[i].column_name %>: [
      { required: true, message: '<%= required[i].column_comment %>不能为空', trigger: 'blur' },
    ],
    <%_ } -%>
  },
})

// 表格数据
const tableData = ref([]);
// 选中的表格ID
const checkedIds = ref([]);
// 加载状态
const loading = ref(false);
// 新增、修改对话框的显示与隐藏
const open = ref(false);
// 对话框标题
const title = ref("");

<%_ for(let i = 0; i < queryBetweens.length; i++) { -%>
// <%= queryBetweens[i].column_comment %>范围
const <%= queryBetweens[i].column_name %>Range = ref([]);
<%_ } -%>

nextTick(() => {
  // 将表格和工具栏进行关联
  const $table = <%= tableInfo.business_name %>TableRef.value;
  const $toolbar = toolbarRef.value;
  if ($table && $toolbar) {
    $table.connect($toolbar);
  }
});

onMounted(() => {
  getTableList();
  resetForm();
});

<%_ for(let i = 0; i < queryBetweens.length; i++) { -%>
/**
 * <%= queryBetweens[i].column_comment %>范围改变
 * @param {*} e
 */
 function <%= queryBetweens[i].column_name %>RangeChange(e) {
  if (e) {
    page.queryForm.begin_<%= queryBetweens[i].column_name %> = e[0];
    page.queryForm.end_<%= queryBetweens[i].column_name %> = e[1];
  } else {
    page.queryForm.begin_<%= queryBetweens[i].column_name %> = null;
    page.queryForm.end_<%= queryBetweens[i].column_name %> = null;
  }
}
<%_ } -%>

/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  <% for(let i = 0; i < queryBetweens.length; i++) { -%>
    <%= queryBetweens[i].column_name %>Range.value = []
    page.queryForm.begin_<%= queryBetweens[i].column_name %> = null;
    page.queryForm.end_<%= queryBetweens[i].column_name -%> = null;
  <%_ } -%>  
  getTableList();
}

/**
 * 表格全选事件
 * @param {*} e
 */
 function selectAllChangeEvent(e) {
  checkedIds.value = e.records.map((item) => item.<%= primaryKey %>);
}

/**
 * 表格选中事件
 * @param {*} e
 */
function selectChangeEvent(e) {
  checkedIds.value = e.records.map((item) => item.<%= primaryKey %>);
}

/**
 * 新增<%= tableInfo.table_comment %>
 */
function handleAdd() {
  open.value = true;
  title.value = "新增<%= tableInfo.table_comment %>";
}

/**
 * 修改<%= tableInfo.table_comment %>
 * @param {Object} row 行数据
 */
function handleUpdate(row) {
  let ids = row ? [row.<%= primaryKey %>] : checkedIds.value;
  if (ids.length == 0) {
    return ElMessage.warning("请选择要修改的<%= tableInfo.table_comment %>");
  } else if (ids.length > 1) {
    return ElMessage.warning("只能选择一个<%= tableInfo.table_comment %>");
  }
  <%= tableInfo.business_name %>Info(row.<%= primaryKey %>).then((res) => {
    open.value = true;
    title.value = "修改<%= tableInfo.table_comment %>";
    nextTick(() => {
      page.form = res.data.data
    });
  });
}

/**
 * 删除<%= tableInfo.table_comment %>
 * @param {Object} row 行数据
 */
 function handleDelete(row) {
  let ids = row ? [row.<%= primaryKey %>] : checkedIds.value;
  if (ids.length == 0) {
    return ElMessage.warning("请选择要删除的<%= tableInfo.table_comment %>");
  }
  <%= tableInfo.business_name %>Del({ ids }).then((res) => {
    getTableList();
  });
}

/**
 * 获取<%= tableInfo.table_comment %>列表
 */
function getTableList() {
  loading.value = true;
  <%= tableInfo.business_name %>List(page.queryForm)
    .then((res) => {
      tableData.value = res.data.list;
      page.total = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/**
 * 提交新增、修改
 */
function submit() {
  formRef.value.validate((valid) => {
    if (valid) {
      if (page.form.<%= primaryKey %>) {
        <%= tableInfo.business_name %>Edit(page.form.<%= primaryKey %>, {
          form: page.form
        }).then((res) => {
          open.value = false;
          ElMessage.success("修改成功");
          getTableList();
        });
      } else {
        <%= tableInfo.business_name %>Add({ form: page.form }).then((res) => {
          open.value = false;
          ElMessage.success("新增成功");
          getTableList();
        });
      }
    }
  });
}

/**
 * 导出
 */
 function handleExport() {
  <%= tableInfo.business_name %>Export().then((res) => {
    downloadFile(res);
  });
}

/**
 * 取消
 */
 function cancel() {
  open.value = false;
}

/**
 * 重置
 */
function reset() {
  resetForm();
}

/**
 * 重置表单
 */
 function resetForm() {
  page.form = {
    <%= primaryKey %>:null,
    <%_ for(let i = 0; i < edit.length; i++) { -%>
    <%= edit[i].column_name %>: null,
    <%_ } -%>
  };
}

</script>

<style lang="scss" scoped>

</style>